"""
UI组件模块 - 处理页面展示和UI元素
"""

import streamlit as st

def load_css():
    """加载自定义CSS样式"""
    st.markdown(r"""
    <style>
    /* 全局变量与基础样式 */
    :root {
        --primary-color: #2E8B57;       /* 海洋绿，用于主要强调 */
        --primary-light: #3CB371;       /* 中等海洋绿 */
        --secondary-color: #4682B4;     /* 钢蓝色，用于次要强调 */
        --accent-color: #20B2AA;        /* 浅海洋绿，用于点缀 */
        --background-light: #F0F8FF;    /* 爱丽丝蓝，清新背景 */
        --background-dark: #E6F3FF;     /* 稍深的蓝色 */
        --text-primary: #2F4F4F;        /* 深石板灰，主文本 */
        --text-secondary: #556B6B;      /* 中等石板灰，次要文本 */
        --border-color: #B0C4DE;        /* 浅钢蓝，边框颜色 */
        --shadow-color: rgba(46,139,87,0.1); /* 绿色阴影 */
    }
    
    /* 全局样式 */
    body {
        font-family: "Source Han Serif CN", "Noto Serif CJK SC", "Microsoft YaHei", "SimHei", sans-serif;
        color: var(--text-primary);
        background-color: var(--background-light);
    }
    
    /* 页面顶部装饰边框 - 动物园风格 */
    .stApp::before {
        content: "";
        display: block;
        height: 12px;
        width: 100%;
        background: linear-gradient(90deg, 
            var(--primary-color) 0%, 
            var(--accent-color) 20%, 
            var(--secondary-color) 40%, 
            var(--primary-light) 60%, 
            var(--accent-color) 80%, 
            var(--primary-color) 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        border-radius: 0 0 8px 8px;
    }
    
    /* 标题样式 - 动物园风格 */
    .main-title {
        font-size: 2.5rem;
        color: var(--primary-color);
        text-align: center;
        margin-bottom: 1.5rem;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(46,139,87,0.2);
        padding: 1.5rem;
        background: linear-gradient(135deg, var(--background-light) 0%, var(--background-dark) 100%);
        border-radius: 20px;
        border: 3px solid var(--primary-color);
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
    }
    
    .main-title::before {
        content: "🐾";
        position: absolute;
        top: 10px;
        left: 20px;
        font-size: 2rem;
        opacity: 0.3;
    }
    
    .main-title::after {
        content: "🐾";
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 2rem;
        opacity: 0.3;
    }
    
    .sub-title {
        font-size: 1.6rem;
        color: var(--primary-color);
        margin: 1.5rem 0 1rem;
        position: relative;
        padding-left: 1rem;
    }
    
    .sub-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.2rem;
        bottom: 0.2rem;
        width: 4px;
        background-color: var(--primary-color);
        border-radius: 2px;
    }
    
    /* 卡片样式 - 动物园风格 */
    .artifact-card {
        background-color: white;
        border-radius: 20px;
        padding: 1.8rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 20px var(--shadow-color);
        border: 2px solid var(--border-color);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .artifact-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--secondary-color));
    }
    
    .artifact-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 30px rgba(46,139,87,0.15);
        border-color: var(--primary-color);
    }
    
    .artifact-card h3 {
        color: var(--primary-color);
        margin-bottom: 0.8rem;
        font-weight: 600;
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 0.6rem;
    }
    
    /* 文物详情介绍样式 */
    .artifact-intro {
        background-color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 10px var(--shadow-color);
        border-left: 4px solid var(--primary-color);
    }
    
    /* 信息卡片样式 */
    .info-card {
        background-color: white;
        border-radius: 8px;
        padding: 1.2rem;
        margin: 1rem 0;
        box-shadow: 0 3px 8px var(--shadow-color);
        border: 1px solid var(--border-color);
    }
    
    /* 基本信息卡片 - 右侧显示 */
    .basic-info {
        height: 100%;
        overflow-y: auto;
        max-height: 400px;
        border-left: 4px solid var(--secondary-color);
    }
    
    /* 响应容器样式 */
    .response-container {
        background-color: white;
        border-radius: 12px;
        padding: 1.8rem;
        box-shadow: 0 6px 12px var(--shadow-color);
        border-left: 5px solid var(--primary-color);
        margin: 1.5rem 0;
        position: relative;
    }
    
    .response-container::before {
        content: '\201C';  /* 使用Unicode左双引号字符 */
        position: absolute;
        top: 10px;
        left: 15px;
        font-size: 3rem;
        color: rgba(140, 61, 43, 0.1);
        font-family: serif;
        line-height: 1;
    }
    
    .info-box {
        background-color: rgba(48, 140, 108, 0.1);
        border-left: 5px solid var(--accent-color);
        padding: 1.2rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .highlight-box {
        background-color: rgba(212, 167, 106, 0.15);
        border-left: 5px solid var(--secondary-color);
        padding: 1.2rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .era-timeline {
        background-color: white;
        padding: 1.5rem;
        border-radius: 12px;
        margin: 1.5rem 0;
        box-shadow: 0 4px 10px var(--shadow-color);
        overflow-x: auto;
    }
    
    .era-marker {
        background-color: var(--primary-color);
        color: white;
        padding: 0.4rem 0.7rem;
        border-radius: 20px;
        font-size: 0.9rem;
        display: inline-block;
        margin-right: 0.7rem;
        margin-bottom: 0.7rem;
        box-shadow: 0 2px 5px var(--shadow-color);
    }
    
    /* 按钮样式 - 动物园风格 */
    .custom-button {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        color: white;
        padding: 0.8rem 1.5rem;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(46,139,87,0.2);
        position: relative;
        overflow: hidden;
    }
    
    .custom-button::before {
        content: "🐾";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        opacity: 0.7;
    }
    
    .custom-button:hover {
        background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
        box-shadow: 0 6px 15px rgba(46,139,87,0.3);
        transform: translateY(-3px) scale(1.05);
    }
    
    .quick-query-button {
        background-color: white;
        color: var(--primary-color);
        border: 2px solid var(--border-color);
        padding: 0.6rem 1.2rem;
        border-radius: 25px;
        cursor: pointer;
        margin-right: 0.6rem;
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        box-shadow: 0 3px 8px rgba(46,139,87,0.1);
        position: relative;
        overflow: hidden;
    }
    
    .quick-query-button::before {
        content: "🦁";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        opacity: 0.6;
    }
    
    .quick-query-button:hover {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(46,139,87,0.2);
        transform: translateY(-2px) scale(1.05);
    }
    
    /* 加载动画 - 动物园风格 */
    .simple-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }
    
    .spinner-circle {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(46, 139, 87, 0.1);
        border-radius: 50%;
        border-left-color: var(--primary-color);
        border-top-color: var(--accent-color);
        border-right-color: var(--secondary-color);
        animation: spin 1.2s linear infinite;
        position: relative;
    }
    
    .spinner-circle::after {
        content: "🐾";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.2rem;
        opacity: 0.6;
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    /* 修改原生Streamlit spinner样式 - 动物园风格 */
    .stSpinner > div {
        border-color: var(--primary-color) transparent transparent !important;
        border-width: 3px !important;
    }
    
    /* 侧边栏样式 */
    .sidebar .sidebar-content {
        background-color: white;
        border-right: 1px solid var(--border-color);
    }
    
    .sidebar h2 {
        color: var(--primary-color);
        font-size: 1.3rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--border-color);
    }
    
    .artifact-nav-item {
        display: block;
        padding: 0.6rem 1rem;
        margin-bottom: 0.5rem;
        border-radius: 6px;
        color: var(--text-primary);
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .artifact-nav-item:hover {
        background-color: rgba(140, 61, 43, 0.1);
        color: var(--primary-color);
    }
    
    .artifact-nav-item.active {
        background-color: var(--primary-color);
        color: white;
    }
    
    /* 标签样式 */
    .stTabs [data-baseweb="tab-list"] {
        gap: 2px;
    }
    
    .stTabs [data-baseweb="tab"] {
        background-color: white !important;
        border-radius: 4px 4px 0 0;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    
    .stTabs [aria-selected="true"] {
        background-color: var(--background-light) !important;
        border-bottom: 2px solid var(--primary-color) !important;
        font-weight: bold;
    }
    
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--background-light);
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color);
    }
    
    /* 动物展示图样式 - 动物园风格 */
    .artifact-image {
        border-radius: 20px;
        box-shadow: 0 8px 20px var(--shadow-color);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        border: 3px solid var(--primary-color);
        position: relative;
        overflow: hidden;
    }
    
    .artifact-image::before {
        content: "🦁";
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
        opacity: 0.3;
        z-index: 1;
    }
    
    .artifact-image:hover {
        transform: scale(1.05) rotate(2deg);
        box-shadow: 0 15px 30px rgba(46,139,87,0.2);
        border-color: var(--accent-color);
    }
    
    /* 历史记录样式 */
    .history-item {
        background-color: white;
        padding: 1.2rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        border-left: 3px solid var(--secondary-color);
        box-shadow: 0 2px 5px var(--shadow-color);
    }
    
    .history-query {
        font-weight: bold;
        color: var(--primary-color);
    }
    
    .history-response {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-top: 0.8rem;
        padding-top: 0.8rem;
        border-top: 1px solid var(--border-color);
    }
    
    /* 返回按钮样式 */
    button[key="back_button"] {
        float: right;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 20px;
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px var(--shadow-color);
    }
    
    button[key="back_button"]:hover {
        background-color: var(--primary-light);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transform: translateY(-2px);
    }
    
    /* 美化Streamlit按钮 - 动物园风格 */
    .stButton > button {
        background-color: white;
        color: var(--primary-color);
        border: 2px solid var(--border-color);
        padding: 0.6rem 1rem;
        border-radius: 25px;
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
        transition: all 0.3s ease;
        box-shadow: 0 3px 8px rgba(46,139,87,0.1);
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }
    
    .stButton > button::before {
        content: "🐾";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        opacity: 0.6;
    }
    
    .stButton > button:hover {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(46,139,87,0.2);
        transform: translateY(-3px) scale(1.02);
    }
    
    /* 按钮网格布局 - 替代嵌套columns */
    .button-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    
    /* 响应式布局 - 较小屏幕上每行显示2个按钮 */
    @media (max-width: 768px) {
        .button-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    /* 较小屏幕上每行显示1个按钮 */
    @media (max-width: 480px) {
        .button-grid {
            grid-template-columns: 1fr;
        }
    }

    /* 上传标题区域样式 - 动物园风格 */
    .upload-title-container {
        border: 3px dashed var(--primary-color);
        border-radius: 20px;
        padding: 25px;
        margin-bottom: 20px;
        background: linear-gradient(135deg, rgba(240,248,255,0.8), rgba(230,243,255,0.8));
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .upload-title-container::before {
        content: "🦁 🐯 🐘 🦒 🦓 🐧 🐻‍❄️ 🐬 🦚 🐒";
        position: absolute;
        top: 5px;
        left: 0;
        right: 0;
        font-size: 1.2rem;
        opacity: 0.3;
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
    }
    
    .upload-title {
        color: var(--primary-color);
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(46,139,87,0.2);
    }
    
    .upload-subtitle {
        color: var(--text-secondary);
        font-size: 1.1rem;
        margin-bottom: 0;
        text-align: center;
    }
    
    /* 上传区域和结果区域样式 */
    .upload-area {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 10px;
    }
    
    .result-area {
        background-color: #f8f9fa;
        border-radius: 10px;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        text-align: center;
    }
    
    /* 识别结果样式 - 动物园风格 */
    .recognition-result {
        background: linear-gradient(135deg, rgba(240,248,255,0.9), rgba(230,243,255,0.9));
        border-left: 5px solid var(--primary-color);
        padding: 20px;
        border-radius: 15px;
        margin: 15px 0;
        width: 100%;
        text-align: left;
        box-shadow: 0 5px 15px rgba(46,139,87,0.1);
        position: relative;
        overflow: hidden;
    }
    
    .recognition-result::before {
        content: "🎯";
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
        opacity: 0.4;
    }
    
    .recognition-title {
        color: var(--primary-color);
        font-weight: bold;
        font-size: 1.3rem;
        margin-bottom: 15px;
        text-shadow: 1px 1px 2px rgba(46,139,87,0.1);
    }
    
    /* 修复tab内容区域 */
    .stTabs [data-baseweb="tab-panel"] {
        padding: 0 !important;
    }
    
    /* 调整图片大小 */
    .uploaded-image-container {
        margin-top: 15px;
        text-align: center;
    }
    
    .uploaded-image {
        max-width: 100%;
        max-height: 300px;
        object-fit: contain;
        border-radius: 8px;
        border: 1px solid #ddd;
    }
    
    .image-caption {
        color: #666;
        font-size: 0.9rem;
        margin-top: 5px;
    }

    /* 动物画廊 - 动物园风格 */
    .artifact-gallery-image {
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
        box-shadow: 0 6px 15px rgba(46,139,87,0.15);
        border: 3px solid var(--border-color);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .artifact-gallery-image::before {
        content: "🦁";
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.2rem;
        opacity: 0.4;
        z-index: 1;
    }
    
    .artifact-gallery-image:hover {
        transform: scale(1.05) rotate(1deg);
        box-shadow: 0 10px 25px rgba(46,139,87,0.25);
        border-color: var(--primary-color);
    }
    
    .artifact-gallery-caption {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 15px;
        font-weight: bold;
        color: var(--primary-color);
        font-size: 1.1rem;
        text-shadow: 1px 1px 2px rgba(46,139,87,0.1);
    }
    </style>
    """, unsafe_allow_html=True)

def add_bg_from_url(url):
    """添加背景图片"""
    st.markdown(
        f"""
        <style>
        .stApp::after {{
            content: "";
            background-image: url("{url}");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            opacity: 0.1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: fixed;
            z-index: -1;
        }}
        </style>
        """,
        unsafe_allow_html=True
    )

def create_navigation_bar(active_page="home"):
    """创建导航栏 - 动物园风格"""
    logo_url = "https://img-blog.csdnimg.cn/20201111151906530.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDVF9QSA==,size_16,color_FFFFFF,t_70"
    
    home_active = "active" if active_page == "home" else ""
    explore_active = "active" if active_page == "explore" else ""
    timeline_active = "active" if active_page == "timeline" else ""
    about_active = "active" if active_page == "about" else ""
    
    nav_html = f"""
    <div class="navigation-bar">
        <div class="app-logo">
            <img src="{logo_url}" alt="Logo">
            🦁 智慧动物园动物讲解助手 🐯
        </div>
        <div class="nav-links">
            <a class="nav-link {home_active}" href="#">🏠 首页</a>
            <a class="nav-link {explore_active}" href="#">🔍 动物探索</a>
            <a class="nav-link {timeline_active}" href="#">📅 动物时间线</a>
            <a class="nav-link {about_active}" href="#">ℹ️ 关于我们</a>
        </div>
    </div>
    """
    return nav_html 